<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>Ducphanduy's Tweet Search Page</title>
</head>
<script src="../../js/angular.min.js"></script>
<script src="../../js/jquery.min.js"></script>

<body>
    <center>

        <h1>Tweet Search Page using Angular.js</h1>


        <div ng-app="TweetSearch" ng-controller="Controller">

            <input type="text" id="query" ng-model="query" placeholder="Search tweet from Loklak">
            <span class="input-group-btn">
            <button href='#' class="btn btn-primary" type="button" id="button" ng-click="Search()">Search</button>
            </span>
            <br>
            <div ng-if="spinner"><img src="loading.gif" height="150" width="150"/></div> <br>
            <table>
                <tr ng-repeat="x in myData">
                    <td ng-bind-html="x.text"></td>
                    <td><a href="{{x.link}}" target="_blank">Link</a></td>
                </tr>
            </table>

        </div>


    </center>

    <script>
        var app = angular.module('TweetSearch', []);
        app.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

            $scope.Search = function() {
                if ($scope.query === undefined || $scope.query.length === 0) {
                    return;
                }
                $scope.spinner=true;
                var QueryCommand = 'https://api.loklak.org/api/search.json?callback=JSON_CALLBACK&q=' + $scope.query;

                $http.jsonp(String(QueryCommand)).then(function(response) {
                    $scope.myData = response.data.statuses;
                    for (var i = 0; i < $scope.myData.length; ++i) {
                        $scope.myData[i].text = $sce.trustAsHtml($scope.myData[i].text);
                    }
                    $scope.spinner = false;
                });
            }

            window.addEventListener("keydown",   function flagup(event)
            {
                if(event.key=='Enter')
                {
                    $scope.Search();
                }
            });
        }]);
    </script>
</body>

</html>
